<template>
	<view>
		<view v-for="item in goodsInfo" :key="item.goodsname" class="goodsinfo">
			<view class="goods_img">
				<image :src="imgurl + item.img" mode=""></image>
			</view>
			<view class="tex">
				¥ <view class='tex1'>{{item.price}}</view>
				<view class='tex2'>¥{{item.market_price}}</view>
			</view>
			<view class="">{{item.goodsname}}</view>
			<view class="detail_1">畅所欲言</view>
			<view class="detail_bac">11.11限时299</view>
		</view>

		<view v-for="(item,index) in desc" :key="index" class="block">
			<image :src="item" mode=""></image>
		</view>

		<!-- 底部导航 -->
		<view class="buts">
			<view class="Left">
				<view class="">
					<u-icon name="chat" color="#fa3534" size="28" class="icons"></u-icon><text>客服</text>
				</view>
				<view class="">
					<u-icon name="shopping-cart" color="#2979ff" size="28" class="icons"></u-icon><text>购物车</text>
				</view>
				<view class="">
					<u-icon name="heart-fill" color="#fa3534" size="28" class="icons"></u-icon><text>已收藏</text>
				</view>
			</view>
			<view class="Right">
				<view class="butsBox">
					<button class="goCart" @click="toCart(goodsInfo[0].id)">加入购物车</button>
					<button class="goShop" @click='toorder()'>立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/common/userinfo.js'
	// 引入封装好的接口
	import {
		getGoodsInfo,
		cartAdd
	} from '../../request/app.js'
	export default {
		data() {
			return {
				goodsInfo: [],
				desc: [],
				imgurl:this.$imgUrl 
			}
		},
		methods: {
			// 跳转购物车页面
			toCart(id) {
				console.log(id, '传参');
				if(uni.getStorageSync('userinfo')){
					// 添加购物车接口
				cartAdd({
						uid: user.uid,
						goodsid: id,
						num: 1,
					})
					.then(res => {
						console.log(res, '添加购物车');
						if (res.data.code == 200) {
							// 跳转购物车
							uni.reLaunch({
								url: '../cart/cart'
							})
						}
					})
				} else {
					// 给用户提示 模态框
					uni.showModal({
						title: '用户未登录',
						content: '',
						confirmText: '前往登录',
						cancelText: '不去',
						// 成功响应的
						success(res) {
							// 用户点击确认按钮 就条状到登录页面
							if (res.confirm) {
								// 跳转登录页面
								uni.navigateTo({
									url: '../xmxLogin/xmxLogin'
								})
							} else if (res.cancel) {  // 点击取消按钮 跳回道首页
								// 跳转登录页面
								// uni.switchTab({
								// 	url: '../home/home'
								// })
							}
						}
					})
				}
				
			},
			// 跳转订单页
			toorder(){
				uni.navigateTo({
					url:'../order/order'
				})
				uni.setStorageSync('arr',this.goodsInfo)
			}
		},
		onLoad(opation) {

			console.log(opation.id, '详情页opation');
			// 调用详情接口
			getGoodsInfo({
					id: opation.id
				})
				.then(res => {
					console.log(res, "详情页响应");
					if (res.data.code == 200) {
						// 展开数据，为了 给图片添加完整地址
						this.goodsInfo = res.data.list
						// .map(item => ({
						// 	description: item.description,
						// 	img: this.$imgUrl + item.img,
						// 	goodsname: item.goodsname,
						// 	id: item.id,
						// 	ishot: item.ishot,
						// 	isnew: item.isnew,
						// 	market_price: item.market_price,
						// 	price: item.price,
						// 	second_cateid: item.second_cateid,
						// 	specsid: item.specsid,
						// 	status: item.status
						// }))
						let onList = res.data.list[0].description.split('"')
						onList.map((item, index) => {
							if (index % 2 != 0) {
								this.desc.push(onList[index])
							}
						})
					}

				})
		}
	}
</script>

<style lang="less">
	.block {
		margin-top: 10px;

		image {
			width: 100%;
			height: 400px;
		}

	}

	.goodsinfo {
		.goods_img {
			image {
				width: 100%;
				height: 400px;
			}
		}

		.tex {
			height: 30px;
			color: red;
			display: flex;
			align-items: baseline;
			margin: 10px 0;

			.tex1 {
				font-size: 25px;
			}

			.tex2 {
				color: #999;
				text-decoration: line-through;
			}
		}

		.detail_1 {
			color: #999;
			margin: 10px 0;
		}

		.detail_bac {
			width: 100px;
			color: #fff;
			background-color: red;
		}
	}

	.buts {
		width: 100%;
		height: 50px;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;

		.Left {
			width: 40%;
			height: 50px;
			display: flex;

			view {
				width: 33.33%;
				text-align: center;
				padding: 0 7px;
				box-sizing: border-box;

				.icons {
					left: 10px;
				}

				text {
					font-size: 12px;
					color: rgb(100, 101, 102);
				}
			}
		}

		.Right {

			width: 60%;
			height: 50px;
			padding: 5px 0;
			box-sizing: border-box;

			.butsBox {
				width: 95%;
				box-sizing: border-box;
				height: 40px;
				margin: auto;
				display: flex;

				.goCart {
					width: 50%;
					height: 40px;
					line-height: 40px;
					background: linear-gradient(to right, #ffd01e, #ff8917);
					color: #fff;
					font-size: 15px;
					border-radius: 30px 0 0 30px;
					font-weight: bold;
				}

				.goShop {
					width: 50%;
					height: 40px;
					line-height: 40px;
					color: #fff;
					margin-right: 5px;
					font-size: 15px;
					font-weight: bold;
					background: linear-gradient(to right, #ff6034, #ee0a24);
					border-radius: 0 30px 30px 0;
				}
			}

		}
	}
</style>
